<template>
  <a-card class="attachments-card" title="审批文件">
    <template #extra>
      <a-space>
        <a-button size="small" @click="refreshData">
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
        <a-button size="small" type="primary" @click="showUploadModal" v-perm="['lindi:tradeApplicationApproveFile:add']">
          <template #icon>
            <icon-plus />
          </template>
          上传文件
        </a-button>
      </a-space>
    </template>

    <!-- 审批文件列表 -->
    <div class="attachments-list">
      <div v-if="loading" class="loading-container">
        <a-spin size="large" />
      </div>
      
      <div v-else-if="approveFilesList.length === 0" class="empty-container">
        <a-empty description="暂无审批文件" />
      </div>
      
      <div v-else class="attachments-grid">
        <div v-for="approveFile in approveFilesList" :key="approveFile.approveFileId" class="attachment-item">
          <a-card class="attachment-card" hoverable>
            <div class="attachment-preview">
              <div class="file-icon">
                <a-avatar :size="64" class="file-avatar" shape="square">
                  <img v-if="approveFile.file && isImageFile(approveFile.file.fileName)" :src="approveFile.file.fileUrl" alt="预览" />
                  <icon-book v-else-if="approveFile.file && isPdfFile(approveFile.file.fileName)" class="text-red-600" />
                  <icon-book v-else-if="approveFile.file && isWordFile(approveFile.file.fileName)" class="text-blue-600" />
                  <icon-calendar v-else-if="approveFile.file && isExcelFile(approveFile.file.fileName)" class="text-green-600" />
                  <icon-desktop v-else-if="approveFile.file && isPptFile(approveFile.file.fileName)" class="text-orange-600" />
                  <icon-folder v-else-if="approveFile.file && isZipFile(approveFile.file.fileName)" class="text-purple-600" />
                  <icon-book v-else class="text-gray-600" />
                </a-avatar>
              </div>
              <div class="file-info">
                <div class="file-name" :title="approveFile.approveFileName">{{ approveFile.approveFileName }}</div>
                <div class="file-meta">
                  <span class="file-size" v-if="approveFile.file">{{ formatFileSize(approveFile.file.fileSize) }}</span>
                  <a-tag color="blue" size="small">审批文件</a-tag>
                </div>
                <div class="upload-info">
                  <span class="upload-time">{{ formatDateTime(approveFile.createTime) }}</span>
                </div>
              </div>
            </div>
            
            <div class="attachment-actions">
              <a-space>
                <a-button size="mini" @click="previewFile(approveFile)" v-if="approveFile.file">
                  <template #icon>
                    <icon-eye />
                  </template>
                  预览
                </a-button>
                <a-button size="mini" type="primary" @click="downloadFile(approveFile)" v-if="approveFile.file">
                  <template #icon>
                    <icon-download />
                  </template>
                  下载
                </a-button>
                <a-button size="mini" @click="editApproveFile(approveFile)" v-perm="['lindi:tradeApplicationApproveFile:update']">
                  <template #icon>
                    <icon-edit />
                  </template>
                  编辑
                </a-button>
                <a-button size="mini" status="danger" @click="deleteApproveFile(approveFile)" v-perm="['lindi:tradeApplicationApproveFile:delete']">
                  <template #icon>
                    <icon-delete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </div>
          </a-card>
        </div>
      </div>
    </div>

    <!-- 上传审批文件弹窗 -->
    <a-modal
      v-model:visible="uploadModalVisible"
      :title="uploadModalTitle"
      width="600px"
      @ok="handleUploadSubmit"
      @cancel="handleModalCancel"
      :confirm-loading="submitLoading"
    >
      <a-form
        ref="uploadFormRef"
        :model="uploadForm"
        :rules="uploadRules"
        layout="vertical"
      >
        <a-form-item field="approveFileName" label="审批文件名称" required>
          <a-input
            v-model="uploadForm.approveFileName"
            placeholder="请输入审批文件名称"
          />
        </a-form-item>
        
        <!-- 已有附件展示区域 -->
        <div v-if="existingFiles.length > 0" class="existing-files-container mb-4">
          <div class="mb-2 flex items-center justify-between">
            <div class="text-gray-500">
              <icon-info-circle class="mr-1" /> 已上传审批文件
            </div>
          </div>
          <a-list :bordered="false" :grid="{ gutter: 16, column: 3 }">
            <a-list-item v-for="(file, index) in existingFiles" :key="file.fileId">
              <a-card class="file-card" hoverable>
                <div class="flex items-start">
                  <div class="file-icon mr-3">
                    <a-avatar :size="40" shape="square">
                      <icon-file-pdf v-if="file.fileType === 'pdf'"/>
                      <icon-file-image v-else-if="['jpg', 'png', 'jpeg'].includes(file.fileType)"/>
                      <icon-file v-else/>
                    </a-avatar>
                  </div>
                  <div class="flex-1 overflow-hidden">
                    <div class="font-medium truncate mb-1">{{ file.fileName }}</div>
                    <div class="text-gray-500 text-xs mb-1">上传时间：{{ formatDateTime(file.uploadTime) || '未知' }}</div>
                    <div class="mt-2">
                      <a-space>
                        <a-button size="mini" type="primary" @click="downloadFile(file)">
                          <template #icon>
                            <icon-download />
                          </template>
                          下载
                        </a-button>
                        <a-button size="mini" @click="previewFile(file)">
                          <template #icon>
                            <icon-eye />
                          </template>
                          预览
                        </a-button>
                        <a-button size="mini" status="danger" @click="removeExistingFile(index)">
                          <template #icon>
                            <icon-delete />
                          </template>
                          删除
                        </a-button>
                      </a-space>
                    </div>
                  </div>
                </div>
              </a-card>
            </a-list-item>
          </a-list>
        </div>
        
        <a-form-item field="files" label="选择文件">
          <uploadFile
            ref="approveFileUploadFileRef"
            :fileSource="fs"
            :limit="1"
            accept="*"
            @uploadSuccess="handleUploadSuccess"
          >
            <template #upload-button>
              <div class="upload-area">
                <icon-upload class="upload-icon" />
                <div class="upload-text">点击上传审批文件</div>
                <div class="upload-tip">支持单文件上传，文件大小不超过 10MB</div>
              </div>
            </template>
          </uploadFile>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 编辑审批文件弹窗 -->
    <a-modal
      v-model:visible="editModalVisible"
      title="编辑审批文件信息"
      width="500px"
      @ok="handleEditSubmit"
      @cancel="resetEditForm"
    >
      <a-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        layout="vertical"
      >
        <a-form-item field="approveFileName" label="审批文件名称" required>
          <a-input
            v-model="editForm.approveFileName"
            placeholder="请输入审批文件名称"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 文件预览弹窗 -->
    <a-modal
      v-model:visible="previewModalVisible"
      :title="previewFileData?.fileName"
      width="80%"
      :footer="false"
      :body-style="{ padding: 0 }"
    >
      <div class="file-preview-container">
        <div v-if="previewFileData && isImageFile(previewFileData.fileName)" class="image-preview">
          <img :src="previewFileData.fileUrl" alt="预览" class="preview-image" />
        </div>
        <div v-else-if="previewFileData && isPdfFile(previewFileData.fileName)" class="pdf-preview">
          <iframe :src="previewFileData.fileUrl" class="preview-iframe"></iframe>
        </div>
        <div v-else class="unsupported-preview">
          <a-empty description="该文件类型不支持在线预览">
            <template #extra>
              <a-button type="primary" @click="downloadFile(previewFileData)">
                下载文件
              </a-button>
            </template>
          </a-empty>
        </div>
      </div>
    </a-modal>
  </a-card>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import {
  IconRefresh,
  IconPlus,
  IconEye,
  IconEdit,
  IconDelete,
  IconDownload,
  IconImage,
  IconBook,
  IconCalendar,
  IconDesktop,
  IconFolder,
  IconInfoCircle,
  IconFile,
  IconFilePdf,
  IconFileImage,
  IconUpload
} from '@arco-design/web-vue/es/icon';
import uploadFile from '~/components/uploadFile/index.vue';
import { fileSource } from '~/utils/sys.js';
import * as tradeApplicationApproveFileApi from '~/api/lindi/tradeApplicationApproveFile';
import { deleteFileApi } from '~/api/basic/file.js';

// 定义props
const props = defineProps({
  tradeApplicationId: {
    type: String,
    required: true
  }
});

// 响应式数据
const loading = ref(false);
const uploadModalVisible = ref(false);
const editModalVisible = ref(false);
const previewModalVisible = ref(false);
const uploadModalTitle = ref('上传审批文件');
const uploadFormRef = ref(null);
const editFormRef = ref(null);
const uploadRef = ref(null);
const approveFileUploadFileRef = ref(null);
const approveFilesList = ref([]);
const activeCategory = ref('all');
const editingApproveFile = ref(null);
const previewFileData = ref(null);
const uploadFileList = ref([]);
const existingFiles = ref([]);
const newUploadedFileIds = ref([]);
const submitLoading = ref(false);

// 文件来源配置
const fs = fileSource.lindi_trade_approve_file?.key || 'lindi_trade_application_approve_file';

// 审批文件统计
const summary = computed(() => {
  const totalCount = approveFilesList.value.length;
  const documentCount = approveFilesList.value.filter(item => 
    item.file && ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'].some(ext => 
      item.file.fileName.toLowerCase().endsWith(ext)
    )
  ).length;
  const imageCount = approveFilesList.value.filter(item => 
    item.file && ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].some(ext => 
      item.file.fileName.toLowerCase().endsWith(ext)
    )
  ).length;
  const otherCount = totalCount - documentCount - imageCount;
  
  return {
    totalCount,
    documentCount,
    imageCount,
    otherCount
  };
});

// 过滤后的审批文件列表
const filteredApproveFiles = computed(() => {
  if (activeCategory.value === 'all') {
    return approveFilesList.value;
  }
  
  return approveFilesList.value.filter(item => {
    if (!item.file) return false;
    const fileName = item.file.fileName.toLowerCase();
    switch (activeCategory.value) {
      case 'document':
        return ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'].some(ext => fileName.endsWith(ext));
      case 'image':
        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].some(ext => fileName.endsWith(ext));
      case 'other':
        return !['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].some(ext => fileName.endsWith(ext));
      default:
        return true;
    }
  });
});

// 上传表单数据
const uploadForm = reactive({
  approveFileName: '',
  fileId: null
});

// 编辑表单数据
const editForm = reactive({
  approveFileName: ''
});

// 上传表单验证规则
const uploadRules = {
  approveFileName: [
    { required: true, message: '请输入审批文件名称' }
  ]
};

// 编辑表单验证规则
const editRules = {
  approveFileName: [
    { required: true, message: '请输入审批文件名称' }
  ]
};

// 判断文件类型
const isImageFile = (fileName) => {
  if (!fileName) return false;
  const ext = fileName.toLowerCase().split('.').pop();
  return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(ext);
};

const isPdfFile = (fileName) => {
  if (!fileName) return false;
  return fileName.toLowerCase().endsWith('.pdf');
};

const isWordFile = (fileName) => {
  if (!fileName) return false;
  const ext = fileName.toLowerCase().split('.').pop();
  return ['doc', 'docx'].includes(ext);
};

const isExcelFile = (fileName) => {
  if (!fileName) return false;
  const ext = fileName.toLowerCase().split('.').pop();
  return ['xls', 'xlsx'].includes(ext);
};

const isPptFile = (fileName) => {
  if (!fileName) return false;
  const ext = fileName.toLowerCase().split('.').pop();
  return ['ppt', 'pptx'].includes(ext);
};

const isZipFile = (fileName) => {
  if (!fileName) return false;
  const ext = fileName.toLowerCase().split('.').pop();
  return ['zip', 'rar', '7z', 'tar', 'gz'].includes(ext);
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (!bytes) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取分类颜色
const getCategoryColor = (category) => {
  const colorMap = {
    'planning': 'blue',
    'legal': 'purple',
    'financial': 'green',
    'technical': 'orange',
    'environmental': 'cyan',
    'approval': 'red',
    'other': 'gray'
  };
  return colorMap[category] || 'gray';
};

// 获取分类文本
const getCategoryText = (category) => {
  const textMap = {
    'planning': '规划文件',
    'legal': '法律文件',
    'financial': '财务文件',
    'technical': '技术文件',
    'environmental': '环评文件',
    'approval': '审批文件',
    'other': '其他文件'
  };
  return textMap[category] || '未知分类';
};

// 加载审批文件数据
const loadApproveFiles = () => {
  loading.value = true;
  const params = {
    current: 1,
    size: 1000,
    tradeApplicationId: props.tradeApplicationId
  };
  tradeApplicationApproveFileApi.getPageTradeApplicationApproveFileListApi(params)
    .then(response => {
      console.log(response)
      approveFilesList.value = response.records || [];
    })
    .catch(error => {
      Message.error('加载审批文件失败');
    })
    .finally(() => {
      loading.value = false;
    });
};

// 刷新数据
const refreshData = () => {
  loadApproveFiles();
};

// 分类切换处理
const handleCategoryChange = (value) => {
  activeCategory.value = value;
};

// 显示上传弹窗
const showUploadModal = () => {
  uploadModalTitle.value = '上传附件';
  resetUploadForm();
  uploadModalVisible.value = true;
};

// 预览文件
const previewFile = (approveFile) => {
  if (!approveFile.file) {
    Message.warning('文件不存在，无法预览');
    return;
  }
  previewFileData.value = approveFile.file;
  previewModalVisible.value = true;
};

// 下载文件
const downloadFile = (approveFile) => {
  if (!approveFile.file) {
    Message.warning('文件不存在，无法下载');
    return;
  }
  Promise.resolve()
    .then(() => {
      // 创建临时链接下载文件
      const link = document.createElement('a');
      link.href = approveFile.file.fileUrl;
      link.download = approveFile.file.fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      Message.success('文件下载开始');
    })
    .catch(error => {
      Message.error('文件下载失败');
    });
};

// 编辑审批文件
const editApproveFile = (approveFile) => {
  editingApproveFile.value = approveFile;
  editForm.approveFileName = approveFile.approveFileName;
  editModalVisible.value = true;
};

// 删除审批文件
const deleteApproveFile = (approveFile) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除审批文件「${approveFile.approveFileName}」吗？`,
    onOk: () => {
      tradeApplicationApproveFileApi.deleteTradeApplicationApproveFileByApproveFileIdApi(approveFile.approveFileId)
        .then(() => {
          Message.success('审批文件删除成功');
          loadApproveFiles();
        })
        .catch(error => {
          Message.error('审批文件删除失败');
        });
    }
  });
};

// 处理上传成功
const handleUploadSuccess = (fileInfo) => {
  uploadForm.fileId = fileInfo.fileId;
  newUploadedFileIds.value.push(fileInfo.fileId);
  Message.success('文件上传成功');
};

// 移除已有文件
const removeExistingFile = (index) => {
  const file = existingFiles.value[index];
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除文件「${file.fileName}」吗？`,
    onOk: () => {
      existingFiles.value.splice(index, 1);
      Message.success('文件删除成功');
    }
  });
};

// 提交上传
const handleUploadSubmit = () => {
  uploadFormRef.value.validate((valid) => {
    if (valid) {
      return false;
    }
    
    submitLoading.value = true;
    
    // 准备提交数据
    const submitData = {
      tradeApplicationId: props.tradeApplicationId,
      approveFileName: uploadForm.approveFileName
    };
    
    // 处理文件上传
    if (approveFileUploadFileRef.value && approveFileUploadFileRef.value.fileList && approveFileUploadFileRef.value.fileList.length > 0) {
      const file = approveFileUploadFileRef.value.fileList[0];
      if (file && file.response && file.response.fileId) {
        submitData.fileId = file.response.fileId;
      } else if (file && file.uid && existingFiles.value.length > 0) {
        submitData.fileId = existingFiles.value[0].fileId;
      }
    } else {
      if (existingFiles.value.length > 0) {
        submitData.fileId = existingFiles.value[0].fileId;
      }
    }
    
    // 如果仍然没有获取到文件ID，尝试使用getUploadFileId方法
    if (!submitData.fileId && approveFileUploadFileRef.value) {
      const uploadFileIds = approveFileUploadFileRef.value.getUploadFileId();
      if (uploadFileIds) {
        const fileIdArray = uploadFileIds.split(',').filter(Boolean);
        if (fileIdArray.length > 0) {
          submitData.fileId = fileIdArray[0];
        }
      }
    }
    
    // 最后检查是否有文件ID
    if (!submitData.fileId) {
      Message.error('请选择要上传的文件');
      submitLoading.value = false;
      return;
    }
    
    console.log('submitData', submitData);
    
    // 执行提交操作
    tradeApplicationApproveFileApi.addTradeApplicationApproveFileApi(submitData)
      .then((response) => {
        if (response.code === 200) {
          Message.success('审批文件上传成功');
          newUploadedFileIds.value = [];
          uploadModalVisible.value = false;
          resetUploadForm();
          loadApproveFiles();
        } else {
          Message.error(response.message || '操作失败，请重试');
        }
      })
      .catch((error) => {
        console.error('提交失败:', error);
        Message.error('操作失败，请重试');
      })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

// 提交编辑
const handleEditSubmit = () => {
  editFormRef.value.validate()
    .then(valid => {
      if (!valid) return;
      
      const updateData = {
        approveFileId: editingApproveFile.value.approveFileId,
        approveFileName: editForm.approveFileName
      };
      
      return tradeApplicationApproveFileApi.updateTradeApplicationApproveFileByApproveFileIdApi(updateData);
    })
    .then(response => {
      if (response) {
        Message.success('审批文件信息更新成功');
        editModalVisible.value = false;
        resetEditForm();
        loadApproveFiles();
      }
    })
    .catch(error => {
      Message.error('审批文件信息更新失败');
    });
};

// 清理未保存的文件
const cleanupUnusedFiles = async () => {
  if (newUploadedFileIds.value.length > 0) {
    try {
      const deletePromises = newUploadedFileIds.value.map(fileId => {
        return deleteFileApi(fileId);
      });
      
      await Promise.all(deletePromises);
      console.log('已清理未保存的文件:', newUploadedFileIds.value);
      newUploadedFileIds.value = [];
    } catch (error) {
      console.error('清理未使用文件失败:', error);
      newUploadedFileIds.value = [];
    }
  }
};

// 处理模态框取消/关闭事件
const handleModalCancel = async () => {
  await cleanupUnusedFiles();
  uploadModalVisible.value = false;
  resetUploadForm();
};

// 重置上传表单
const resetUploadForm = () => {
  uploadFormRef.value?.resetFields();
  uploadForm.approveFileName = '';
  uploadForm.fileId = null;
  existingFiles.value = [];
  newUploadedFileIds.value = [];
  if (approveFileUploadFileRef.value && approveFileUploadFileRef.value.fileList !== undefined) {
    approveFileUploadFileRef.value.fileList = [];
  }
};

// 重置编辑表单
const resetEditForm = () => {
  if (editFormRef.value) {
    editFormRef.value.resetFields();
  }
  editForm.approveFileName = '';
  editingApproveFile.value = null;
};

// 组件挂载时加载数据
onMounted(() => {
  loadApproveFiles();
});
</script>

<style scoped>
.attachments-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachments-summary {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}

.category-tabs {
  margin-bottom: 20px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

.attachment-item {
  height: 100%;
}

.attachment-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.attachment-preview {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.file-icon {
  flex-shrink: 0;
}

.file-avatar {
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
}

.file-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.file-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.file-size {
  font-size: 12px;
  color: #666;
}

.file-description {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upload-info {
  font-size: 11px;
  color: #999;
  display: flex;
  justify-content: space-between;
}

.attachment-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
  margin-top: auto;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #1890ff;
  background-color: #f0f8ff;
}

.upload-icon {
  font-size: 24px;
  color: #999;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.upload-tip {
  font-size: 12px;
  color: #999;
}

.file-preview-container {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdf-preview {
  width: 100%;
  height: 100%;
}

.preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.unsupported-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  font-size: 48px;
  color: #ccc;
}

.text-red-600 {
  color: #ff4d4f;
}

.text-blue-600 {
  color: #1890ff;
}

.text-green-600 {
  color: #52c41a;
}

.text-orange-600 {
  color: #fa8c16;
}

.text-purple-600 {
  color: #722ed1;
}

.text-gray-600 {
  color: #666;
}

.existing-files-container {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 16px;
  background-color: #fafafa;
}

.file-card {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.file-card:hover {
  border-color: #1890ff;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-3 {
  margin-right: 12px;
}

.mt-2 {
  margin-top: 8px;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.overflow-hidden {
  overflow: hidden;
}

.font-medium {
  font-weight: 500;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-gray-500 {
  color: #999;
}

.text-xs {
  font-size: 12px;
}

@media (max-width: 768px) {
  .attachments-grid {
    grid-template-columns: 1fr;
  }
  
  .attachment-preview {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .file-info {
    width: 100%;
  }
  
  .upload-info {
    flex-direction: column;
    gap: 2px;
  }
}
</style>